<template>
  <div class="app-operate-content">
    <el-tabs v-model="activeName" style="flex: 1">
      <el-tab-pane :name="APP_CREATE_TAG_NAME" label="基本信息">
        <app-create
          ref="appCreateRef"
          :view-model="viewModel"
          :model="model"
          :control-data="controlData"
          :page-action="pageAction"
        />
      </el-tab-pane>
      <el-tab-pane
        v-if="pageAction != 'create'"
        :name="APP_VERSION_LIST_TAG_NAME"
        label="版本发布"
      >
        <app-version-list :app-id="model.appId" />
      </el-tab-pane>
    </el-tabs>

    <div class="btn-group">
      <el-button
        v-if="activeName === APP_CREATE_TAG_NAME"
        type="primary"
        @click="onSaveAppCreate"
        icon="el-icon-circle-check"
      >
        保 存
      </el-button>
      <el-button @click="onCloseModal" icon="el-icon-circle-close">
        关 闭
      </el-button>
    </div>
  </div>
</template>

<script>
import AppCreate from "./create";
import AppVersionList from "@/views/eip/marketAppVersion/list";

const APP_CREATE_TAG_NAME = "AppCreate";
const APP_VERSION_LIST_TAG_NAME = "AppVersionList";

export default {
  name: "MarketAppOperate",
  components: {
    AppCreate,
    AppVersionList,
  },
  inject: ["pageVue"],
  props: {
    viewModel: Object,
    model: Object,
    controlData: Object,
    pageAction: String,
  },
  data() {
    return {
      activeName: APP_CREATE_TAG_NAME,
      APP_CREATE_TAG_NAME,
      APP_VERSION_LIST_TAG_NAME,
    };
  },
  methods: {
    onSaveAppCreate() {
      if (
        this.pageVue &&
        this.pageVue.$refs["marketAppTable"] &&
        this.$refs["appCreateRef"] &&
        this.$refs["appCreateRef"].$refs["qmGenForm"]
      ) {
        this.$refs["appCreateRef"].$refs["qmGenForm"].validate((valid) => {
          if (valid) {
            const postModel = {
              model: this.model,
              pageAction: this.pageAction,
            };
            const url = this.pageVue.$refs["marketAppTable"].appendPrimaryKey(
              this.pageVue.urls.save
            );
            let appLoading = this.appLoading("数据提交中...");
            this.pageVue
              .save(postModel, url)
              .then((res) => {
                const { success, message } = res;
                if (success) {
                  this.saveSuccessHandle();
                } else {
                  this.msgError(message || "操作失败，请稍后再试");
                }
              })
              .catch((error) => {
                this.msgError(error.message || error);
              })
              .finally(() => {
                appLoading.close();
              });
          }
        });
      }
    },
    saveSuccessHandle() {
      this.pageVue.refresh();
      if (this.pageAction === "create") {
        this.onCloseModal();
      }
    },
    onCloseModal() {
      if (this.pageVue && this.pageVue.$refs["marketAppTable"]) {
        this.pageVue.$refs["marketAppTable"].formModalVisible = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-operate-content {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  padding: 20px;

  .btn-group {
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
  }
}
</style>
